﻿@using Orchard.ContentManagement;
@using Orchard.MediaLibrary.Fields;
@using Vitus.Featured.Models;
@using System.Linq;
@functions
{
    public class FeaturedSlideShowViewModel
    {
        public string ItemUrl { get; set; }

        public string TeaserImageUrl { get; set; }

        public string TeaserImageAlt { get; set; }

        public string FeaturedTitle { get; set; }

        public string FeaturedBody { get; set; }
    }
}
@{
    Script.Include("featured.js");
    
    var featuredItems = Model.ContentItems;
}
@if (featuredItems != null)
{
    var viewModel = new List<FeaturedSlideShowViewModel>();
    
    foreach (dynamic featuredItem in featuredItems)
    {
        FeaturedPart featuredPart = ((IContent)featuredItem).As<FeaturedPart>();
        var teaserImageField = featuredItem.FeaturedPart.TeaserImage as MediaLibraryPickerField;
        var teaserImageMedia = teaserImageField.MediaParts.FirstOrDefault();

        viewModel.Add(new FeaturedSlideShowViewModel
        {
            ItemUrl = Url.ItemDisplayUrl(featuredPart),
            TeaserImageUrl = teaserImageMedia != null ? Display.MediaUrl(Path: teaserImageMedia.MediaUrl, Profile: "FeaturedSlideShow").ToString() : null,
            TeaserImageAlt = teaserImageMedia != null ? teaserImageMedia.AlternateText : null,
            FeaturedTitle = featuredPart.Title,
            FeaturedBody = featuredPart.Body
        });
    }
    
    var active = viewModel.FirstOrDefault();

    if (active != null)
    {

        <div class="featured-slideshow row">
            <article id="featured-slideshow-active">
                <div class="col-xs-12 col-sm-6 col-lg-4" id="featured-slideshow-active-image">
                    @if (active.TeaserImageUrl != null)
                    {
                        <a href="@active.ItemUrl" title="@active.FeaturedTitle"><img class="img-responsive img-thumbnail" src="@active.TeaserImageUrl" alt="@active.TeaserImageAlt" /></a>
                    }
                </div>
                <div class="col-xs-12 col-sm-6 col-lg-4" id="featured-slideshow-active-text">
                    <div class="row">
                        <div class="col-xs-12">
                            <a href="@active.ItemUrl" title="@active.FeaturedTitle"><h1>@active.FeaturedTitle</h1></a>
                            <p>@active.FeaturedBody</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <p class="pull-right"><a class="btn" href="@active.ItemUrl" title="@T("Otevřít celý článek")">@T("Čtěte dále")</a></p>
                        </div>
                    </div>
                </div>
            </article>
    
            <div class="visible-sm visible-md clearfix"></div>

            <div class="col-xs-12 col-lg-4" id="featured-slideshow-topics">
                <div class="row">
                    <div class="col-xs-12">
                        @{ int i = 0; }
                        @foreach (var item in viewModel)
                        {
                            <article class="col-xs-12 col-sm-6 col-lg-12 featured-slideshow-item @((item == active) ? "active" : "")" data-featured-url="@item.ItemUrl" data-featured-image-url="@item.TeaserImageUrl" data-featured-image-alt="@item.TeaserImageAlt" data-featured-title="@item.FeaturedTitle" data-featured-body="@item.FeaturedBody" title="@item.FeaturedTitle">
                                <div class="col-xs-4">
                                    @if (item.TeaserImageUrl != null)
                                    {
                                        <img class="img-responsive img-rounded" src="@item.TeaserImageUrl" alt="@item.TeaserImageAlt" />
                                    }
                                </div>
                                <div class="col-xs-8">
                                    <h1>@item.FeaturedTitle</h1>
                                </div>
                                <div class="clearfix"></div>
                            </article>
                    
                            i++;
                            if (i % 2 == 0)
                            {
                                <div class="visible-sm visible-md clearfix"></div>
                            }
                        }
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <p class="pull-right"><a class="btn" href="@Url.Content("~/blog")" title="@T("Přejít na blog")">@T("Více článků na blogu")</a></p>
                    </div>
                </div>
            </div>
        </div>
    }
}